import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router'
import { getGame } from 'actions/'
import LazyLoad from 'react-lazyload'
import Select from 'rc-select';
import Pagination from 'rc-pagination';
import QRCode from 'qrcode.react';
import { isMobile, isArrayFn } from 'util'
import { homeTitle } from 'root/config'
import Loading from 'components/Loading'
import 'rc-pagination/assets/index.css';
import 'rc-select/assets/index.css';
import './game'


const masonryOptions = {
    transitionDuration: 0
}

class GameList extends Component {
    constructor(props) {
    super(props)
        this.state = {
            display: false,
            dataInfo: [],
            dataSource: [],
            currentPage: 1,
            total: 0,
            PageSize: isMobile() ? this.props.indexNum ? 9 : 18 : this.props.indexNum ? 30 : 50,
            orderby: 'update',
            query: 'totalList',
            GP: true
        }
        this.closeGP = this.closeGP.bind(this)
    }

    componentWillMount() {
        !this.props.indexNum && (document.title=`游戏大全 - ${homeTitle}`)
        const query = this.props.location.query.name
        console.info(query)
        if(query){
            this.setState({
                query,
                currentPage: 1,
            }, () => this.getData(true))
        }else{
            this.getData();
        }
    }

    getData(q){
        const { currentPage, PageSize, orderby, query } = this.state
        const {dispatch} = this.props
        dispatch(getGame({
            channelId: 12633,
            orderby: orderby,
            keyword: query,
            page: currentPage,
            pageNum: PageSize
        })).then((data) => {
            const total = parseInt(data.count)
            this.setState({
                total,
                dataSource: data
            }, () => {
                (q && data.data.length === 1) && this.switch(true, data.data[0])
            })
        })
    }

    switch(value, data){
        console.info(data)
        this.setState({
            display: value,
            dataInfo: data
        })
    }

    getPic(data){
        const piclist = data ? data.map((item,i) => {
            if(item.indexOf('banner') === -1){
                return <li key={i}><img src={item} /></li>
            }
        }) : <Loading />
        return piclist
    }

    gameList(){
        const { dataSource } = this.state
        const data = dataSource.data || []
        const renderList = data ? data.map((item,i) =>{
            if(item.downloadUrl.android.indexOf('http') != -1 || item.downloadUrl.ios.indexOf('http') != -1){
                return <li key={i}>
                            <LazyLoad throttle={100} height={100}><img onClick={() => this.switch(true, item)} src={item.icon} /></LazyLoad>
                            <p onClick={() => this.switch(true, item)}>{item.name}</p>
                            <div>
                                {item.downloadUrl.android.indexOf('http') != -1 ? isMobile() ? <a className='an' href={item.downloadUrl.android}>安卓</a> : <span className='qrcode'><a className='an' href={item.downloadUrl.android}>安卓</a><span className='an'><i></i><QRCode value={item.downloadUrl.android} /><p>安卓用户扫描下载</p></span></span> : ''}
                                {item.downloadUrl.ios.indexOf('http') != -1 ? isMobile() ? <a className='ios' href={item.downloadUrl.android}>苹果</a> : <span className='qrcode'><a className='ios' href={item.downloadUrl.ios}>苹果</a><span className='ios'><i></i><QRCode value={item.downloadUrl.ios} /><p>苹果用户扫描下载</p></span></span>: ''}
                            </div>
                        </li>
            }
        }) : <Loading />
        return renderList
    }

    onChange(current, pageSize) {
        console.log('onChange:current=', current);
        console.log('onChange:pageSize=', pageSize);
        const { dataSource } = this.state
        this.setState({
            currentPage: parseInt(current),
            PageSize: parseInt(dataSource.pageSize) || this.state.PageSize
        }, () => this.getData())
    }

    searchChange(e){
        console.info(e.target.value)
        const query = e.target.value
        this.setState({
            query,
            currentPage: 1,
        }, () => this.getData())
    }

    tab(orderby){
        this.setState({
            orderby,
            currentPage: 1,
        }, () => this.getData())
    }

    closeGP(){
        this.setState({
            GP: !this.state.GP
        })
    }

    render() {
        const { dataSource, dataInfo, display, currentPage, total, PageSize, orderby } = this.state
        const data = dataInfo
        const current = parseInt(dataSource.page) || currentPage
        const pageSize = parseInt(dataSource.pageNum) || PageSize
        const totalNum = parseInt(dataSource.count) || total
        return(
            <div className='wp'>
                <ul className='j-tab show'>
                    <li onClick={() => this.tab('update')} className={orderby === 'update' ? 'cur' : ''}>最新</li>
                    <li onClick={() => this.tab('hot')} className={orderby === 'hot' ? 'cur' : ''}>热门</li>
                </ul>
                <div className='search'><input type='text' placeholder='搜索你喜欢的手游。' onChange={(e) => this.searchChange(e)} /></div>
                <ul className='gamelist clearfix'>
                    {this.gameList()}
                </ul>
                {(isArrayFn(data) === false) &&
                    <div className='gameinfo' style={{display: display ? 'block' : 'none'}}>
                        <span className='safari-close closeA' onClick={() => this.switch(false, [])}></span>
                        <div className='info clearfix'>
                            <img src={data.icon}/>
                            <div className='type'>
                                <h1>{data.name}</h1>
                                {data.shortDesc ? <p>{data.shortDesc}</p> : ''}
                                {data.Type ? <p>类型：{data.Type}</p> : ''}
                            </div>
                            <div className='down'>
                                {data.downloadUrl.android.indexOf('http') != -1 ? isMobile() ? <a className='an' href={data.downloadUrl.android}>安卓 <em className='version'>{data.Version.android}</em><em>{data.size.android}MB</em></a> : <span className='qrcode'><a className='an' href={data.downloadUrl.android}>安卓 <em className='version'>{data.Version.android}</em><em>{data.size.android}MB</em></a><span className='an'><i></i><QRCode value={data.downloadUrl.android} /><p>安卓用户扫描下载</p></span></span>: ''}
                                {data.downloadUrl.ios.indexOf('http') != -1 ? isMobile() ? <a className='ios' href={data.downloadUrl.ios}>苹果 <em className='version'>{data.Version.ios}</em><em>{data.size.ios}MB</em></a> : <span className='qrcode'><a className='ios' href={data.downloadUrl.ios}>苹果 <em className='version'>{data.Version.ios}</em><em>{data.size.ios}MB</em></a><span className='ios'><i></i><QRCode value={data.downloadUrl.ios} /><p>苹果用户扫描下载</p></span></span>: ''}
                            </div>
                        </div>
                        <div className='summary'>{data.Description}</div>
                        <div className='piclist'><ul>{this.getPic(data.imgList)}</ul></div>
                    </div>
                }
                <div className='mask' style={{display: display ? 'block' : 'none'}} onClick={() => this.switch(false, [])}></div>
                <div className='page'>
                    <Pagination
                        selectComponentClass={Select}
                        showQuickJumper={isMobile() ? false : true}
                        // showSizeChanger
                        pageSize={pageSize}
                        current={current}
                        onChange={(a,b) => this.onChange(a,b)}
                        total={totalNum}
                    />
                </div>
                {!this.props.indexNum && <div className="safariDown" style={{display: this.state.GP ? 'block' : 'none'}}>
                    <div className="join row">
                        <span className="join-left">
                            <a href="http://app.guopan.cn/?channelid=12633"><img src="http://cdn2.guopan.cn/frontend/m/static/img/join_e476d12.png" width="50" height="50" /></a>
                        </span>
                        <div className="join-middel col">
                            <p className="j-head">果盘游戏</p>
                            <p className="j-desc">玩手游更轻松</p>
                        </div>
                        <div className="join-right">
                            <a href="http://app.guopan.cn/?channelid=12633" className="j-link">立即下载</a>
                        </div>
                    </div>
                    <i className="safari-close" onClick={this.closeGP}></i>
                </div>}
            </div>
        )
    }
}

function mapStateToProps({getGame}) {
    return {
        _getGame: getGame,
    }
}

export default connect(mapStateToProps)(GameList)
